import {Breadcrumb, Layout, theme} from 'antd';
import React from 'react';
import { Outlet } from "react-router-dom"
import MainMenu from "@/components/HomeMenu/index.tsx"
const { Header, Content, Footer, Sider } = Layout;

const View: React.FC = () => {
    // const navigateTo = useNavigate()
    return (
        <Layout style={{ width: '100vw', height: '98vh'}}>
            <Header style={{
                display: 'flex',
                justifyContent: 'flex-start',
                alignItems: 'center',
                width: '100%',
                height: '48px',
                padding: '0 12px',
            }}>
                <div style={{ flexGrow: 1 }} className="demo-logo-vertical"><span>潘多拉pandora</span></div>
            </Header>
            <Layout>
                <Sider width={150} style={{ background: '#fff' }}>
                    <MainMenu />
                </Sider>
                <Layout style={{ padding: '0 24px' }}>
                    <Breadcrumb style={{ margin: '16px 0' }}>
                        <Breadcrumb.Item>Home</Breadcrumb.Item>
                        <Breadcrumb.Item>List</Breadcrumb.Item>
                        <Breadcrumb.Item>App</Breadcrumb.Item>
                    </Breadcrumb>
                    <Outlet />
                </Layout>
            </Layout>
        </Layout>
    );
};

export default View;